<template>
	<div class="filter_wrap" v-if="filterData">
		<div :class="{open:isSort||isScreen}" @click="hadView"></div>
		<aside class="filter" :class="{filteritem:isSort||isScreen}">
			<div class="filter-nav" v-for="item,index in filterData.navTab" :key="index"
			 @click="deepColor(index)" :class="{deepcolor:index===currentFilter}">
				<span>{{item.name}}</span>
				<i v-if="item.icon" :class="'fa fa-'+item.icon"></i>
			</div>
		</aside>
		<!-- 排序 -->
		<section class="filter-extend" v-show="isSort">
			<ul>
				<li v-for="item,index in filterData.sortBy" :key="index" @click="selectSort(item,index)">
					<span :class="{selectName:currentSort===index}">{{item.name}}</span>
					<i v-show="currentSort==index" class="fa fa-check"></i>
				</li>
			</ul>
			<div class="morefilter-btn">
				<span class="morefilter-clear">清空</span>
				<span class="morefilter-ok">确定</span>
			</div>
		</section>
		<!-- 筛选 -->
		<section class="filter-extend" v-show="isScreen">
			<div class="filter-sort">
				<div v-for="screen,index in filterData.screenBy" :key="index" class="morefilter">
					<p class="title">{{screen.title}}</p>
					<ul>
						<li v-for="item,i in screen.data" :key="i" :class="{selected:item.select}" @click="selectScreen(item,screen)">
							<img v-if="item.icon" :src="item.icon" alt="">
							<span>{{item.name}}</span>
						</li>
					</ul>
				</div>
			</div>
			<div class="morefilter-btn">
				<span @click="clearFilter" class="morefilter-clear" :class="{edit:edit}">清空</span>
				<span class="morefilter-ok" @click="filterOK">确定</span>
			</div>
		</section>
	</div>
</template>

<script>
	export default{
		props:{
			filterData:Object
		},
		data(){
			return{
				currentFilter:0,
				isSort:false,
				currentSort:0,
				isScreen:false
			}
		},
		computed:{
			
			edit(){
				let edit=false;
				this.filterData.screenBy.forEach(screen=>{
					screen.data.forEach(item=>{
						if(item.select){
							edit=true;
						}
					})
				})
				return edit;
			}
		},
		methods:{
			filterOK(){
				let screenData={
					MPI:"",
					offer:"",
					per:""
				}
				let mpiStr=""
				this.filterData.screenBy.forEach(screen=>{
					console.log(screen)
					screen.data.forEach((item,index)=>{
						if(item.select){
							//两种情况 多选和单选
							if(screen.id!=="MPI"){
								//单选
								
							}else{
								//多选
								console.log(item)
								mpiStr+=item.code+",";
								screenData[screen.id]=mpiStr;
								
							}
						}
					})
				})
				this.$emit("update",screenData)
				this.hadView()
			},
			clearFilter(){
				this.filterData.screenBy.forEach(screen=>{
					screen.data.forEach(item=>{
						item.select=false
					})
				})
			},
			deepColor(index){
				this.currentFilter=index;
				switch(index){
					case 0:
					this.isSort=true;
					this.isScreen=false;
					this.$emit('searchFixed',true)
					break;
					case 1:this.$emit("update",{condition:this.filterData.navTab[1].condition})
					this.hadView()
					break;
					case 2:this.$emit("update",{condition:this.filterData.navTab[2].condition})
					this.hadView()
					break;
					case 3:
					this.isScreen=true;
          this.isSort=false;
					this.$emit('searchFixed',true)
					break;
					default:
					this.hadView()
					break;
				}
			},
			hadView(){
				this.isSort=false;
				this.isScreen=false;
				this.$emit("searchFixed",false)
			},
			selectSort(item,index){
				this.currentSort=index;
				this.filterData.navTab[0].name=this.filterData.sortBy[index].name;
				this.hadView();
				//更新数据
				this.$emit("update",{condation:item.code})
			},
			selectScreen(item,screen){
				if(screen.id!=="MPI"){
					//单选
					screen.data.forEach(ele=>{
						ele.select=false;
					})
				}
				item.select=!item.select;
			}
		}
	}
</script>

<style scoped="scoped">
	.filter_wrap{
		background-color: #FFFFFF;
		position: sticky;
		top: 50px;
		z-index: 5555555;
		/* perspective: 300px; */
	}
	.filter{
		display: flex;
	  
	}
	.filter-nav{
		flex: 1;
		text-align: center;
		padding: 10px 0;
	}
	.deepcolor{
		font-weight: bold;
		color: #333;
		background-color: #889EEF;
		border-radius: 5px;
		animation: move .4s ease-in-out ;
	}
	@keyframes move{
		0%{}
		50%{
			transform: translate(10px);
		}
		100%{
			transform: translate(0px);
		}
	}
	.open{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
			background-color: rgba(0,0,0,.5);
			transition: all .3s ease-in-out;
			z-index: 33;
		
	}
.filteritem{
	width: 100%;
	background-color: #FFFFFF;
	position: fixed;
	top: 54.5px;
	z-index: 99999999;
}

.filter-extend {
	position: fixed;
	top: 88px;
	left: 0;
	z-index: 555;
  background-color: #fff;
  color: #333;
  padding-top: 2.133333vw;
	width: 100%;
	overflow: hidden;
	animation: filterExtend .3s ease-in-out;
}
@keyframes filterExtend{
	0%{
		height: 0px;
	}
	100%{
		height: 403px;
	}
}
.filter-extend li {
  position: relative;
  padding-left: 5.333333vw;
  line-height: 10.666667vw;
  overflow: hidden;
}
.fa-check {
  float: right;
  color: #009eef;
  margin-right: 3.733333vw;
  line-height: 10.666667vw;
}

.selectName {
  color: #009eef;
}
/* 筛选 */
.filter-sort {
  background: #fff;
  padding: 0 2.666667vw;
  line-height: normal;
}
.morefilter {
  margin: 2.666667vw 0;
  overflow: hidden;
}
.morefilter .title {
  margin-bottom: 2vw;
  color: #666;
  font-size: 0.5rem;
}
.morefilter ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 0.8rem;
}
.morefilter li {
  box-sizing: border-box;
  width: 30%;
  height: 9.333333vw;
  line-height: 9.333333vw;
  margin: 0.8vw 1%;
  background: #fafafa;
}
.morefilter li img {
  width: 3.466667vw;
  height: 3.466667vw;
  vertical-align: middle;
  margin-right: 0.8vw;
}
.morefilter li span {
  margin-left: 2%;
  vertical-align: middle;
}
.morefilter-btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fafafa;
  box-shadow: 0 -0.266667vw 0.533333vw 0 #ededed;
  line-height: 11.466667vw;
  box-sizing: border-box;
}
.morefilter-btn span {
  font-size: 0.826667rem;
  text-align: center;
  text-decoration: none;
  flex: 1;
}
.morefilter-clear {
  color: #ddd;
  background: #fff;
}
.morefilter-ok {
  color: #fff;
  background: #00d762;
  border: 0.133333vw solid #00d762;
}

.selected {
  color: #3190e8 !important;
  background-color: #edf5ff !important;
}

.edit {
  color: #333 !important;
}
.selected{
}
</style>
